<template>
  <div class="seconds">
    <div class="seconds-wrap">
      <p class="seconds-wrap-title">
        京东秒杀
      </p>
      <count-down :endHours='18'></count-down>
    </div>
    <div class="seconds-content">
      <div class="seconds-content-item"
           v-for="(item,index) in dataSource"
           :key="index">
        <img :src="item.icon"
             class="seconds-content-item-icon">
        <span class="seconds-content-item-old-price">¥{{item.oldPrice | priceFilter}}</span>
        <span class="seconds-content-item-price">¥{{item.price | priceFilter}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import CountDown from '@c/seconds/CountDown.vue'
export default {
  props: {
    dataSource: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    }
  },
  components: {
    CountDown
  }
}
</script>
<style scoped lang = 'scss'>
@import "@css/style.scss";
@import "@css/variable";
.seconds {
  background-color: white;
  border-radius: px2rem($radiusSize);
  margin: px2rem($marginSize);
  .seconds-wrap {
    display: flex;
    padding: px2rem($marginSize);
    &-title {
      font-size: px2rem($titleSize);
      display: flex;
      align-items: center;
    }
  }
  .seconds-content {
    display: flex;
    overflow: auto;
    padding: px2rem($marginSize) 0;
    &-item {
      padding: 0 px2rem($marginSize);
      text-align: center;
      display: flex;
      flex-direction: column;
      &-icon {
        width: px2rem(66);
        height: px2rem(66);
      }
      &-price {
        color: $MainColor;
        font-size: px2rem($titleSize);
      }
      &-old-price {
        color: $hintColor;
        font-size: px2rem($minSize);
        margin-top: px2rem(6);
        text-decoration: line-through;
      }
    }
  }
}
</style>